<template>
    <show-modal :title="title" :loading="loading" width="300px" @cancel="hideSystem" :footer="false">
        <p class="title">系统主题</p>
        <div class="theme_box flex">
            <div class="theme flex-column" v-for="item in themes" :key="item.value">
                <p :class="['color',item.value]" @click.stop="changeTheme(item.value)">
                    <a-icon type="check" v-if="theme == item.value" :style="{ color: '#fff' }" />
                </p>
                <span class="name">{{ item.name }}</span>
            </div>
        </div>
        <a-divider />
    </show-modal>
</template>
<script>
import { mapState } from 'vuex';
export default {
    name: 'SystemSetting',
    data() {
        return {
            title: '项目配置',
            loading: false,
            themes: [
                {
                    name: '蓝色系',
                    value: 'blue'
                },
                {
                    name: '黑色系',
                    value: 'dark'
                },
                {
                    name: '浅色系',
                    value: 'light'
                }
            ]
        };
    },
    computed: {
        ...mapState({
            theme: state => state.setting.theme
        })
    },
    methods: {
        changeTheme(value) {
            this.$store.dispatch('setting/changeSetting', {
                key: 'theme',
                value: value,
                cache: 'THEME'
            });
            document.getElementsByTagName('body')[0].className = `vue-antd-admin-${value}Theme`;
        },
        hideSystem() {
            this.$emit('hide');
        }
    }
};
</script>
<style lang="scss" scoped>
.title {
    font-size: 16px;
}

.theme_box {
    margin-top: 20px;

    .theme {
        margin-right: 20px;
        align-items: center;
        .color{
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-radius: 4px;
            cursor: pointer;
        }
        .name{
            margin-top: 5px;
            font-size: 12px;
        }
        .blue {
            background: $theme-blue;
        }

        .dark {
            background: $theme-dark;
        }

        .light {
            background: $theme-light;
        }
    }
}
</style>
